<#include "../../components/cc-key-value.ftl"/>
<script type="text/x-template" id="jmx-test-case-upsert">
    <custom-dialog class="batch-file-upload-dialog" :options="dialogOptions"
                   :closefn="close">
        <div slot="dialogContent">
            <div class="action-list">
                <div style="padding: 10px;">
                    <el-button type="primary" @click="handleSave">
                        保存
                    </el-button>
                    <el-button type="warning" @click="close">
                        关闭
                    </el-button>
                </div>
            </div>
            <el-form ref="jmxTestCaseForm" :rule="rules" :model="jmxTestCaseInfo" label-width="170px">
                <div class="base-tit legend-title" @click="isCollapseRequest = !isCollapseRequest">
                    <i v-if="isCollapseRequest" class="el-icon-arrow-down"></i>
                    <i v-else class="el-icon-arrow-up"></i>
                    <span>HTTP请求信息</span>
                </div>

                <div :style="{display: isCollapseRequest ? 'none' : 'block'}">
                    <el-form-item label="JMX测试用例名称" prop="testCaseName">
                        <el-input v-model.trim="jmxTestCaseInfo.testCaseName"></el-input>
                    </el-form-item>
                    <el-form-item label="所属项目" prop="projectType">
                        <el-select v-model="jmxTestCaseInfo.projectType">
                            <el-option
                                    v-for="item in projectTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="协议" prop="protocol">
                        <el-input v-model.trim="jmxTestCaseInfo.request.protocol"></el-input>
                    </el-form-item>

                    <el-form-item label="域名" prop="domain">
                        <el-input v-model.trim="jmxTestCaseInfo.request.domain"></el-input>
                    </el-form-item>

                    <el-form-item label="端口" prop="port">
                        <el-input-number :min="8080" :max="9000" :step="1"
                                         v-model.number="jmxTestCaseInfo.request.port"/>
                    </el-form-item>
                    <el-form-item label="请求路径" prop="path">
                        <el-input v-model.trim="jmxTestCaseInfo.request.path"></el-input>
                    </el-form-item>
                    <el-form-item label="请求方式" prop="method">
                        <el-radio-group
                                v-model="jmxTestCaseInfo.request.method"
                        >
                            <el-radio v-for="(item, key) in REQUEST_METHODS" :key="key" :label="item.value">{{
                                item.label
                                }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="URL请求参数" prop="urlParams">
                        <cc-key-value :keyValueList="jmxTestCaseInfo.urlParams"
                                      @change="handleUrlParamsChange"
                        >

                        </cc-key-value>
                    </el-form-item>

                </div>
                <div class="base-tit legend-title" @click="isCollapseHeader = !isCollapseHeader">
                    <i v-if="isCollapseHeader" class="el-icon-arrow-down"></i>
                    <i v-else class="el-icon-arrow-up"></i>
                    <span>HTTP请求头配置</span>
                </div>
                <div :style="{display: isCollapseHeader ? 'none' : 'block'}">
                    <el-form-item label="请求头参数" prop="heads">
                        <cc-key-value :keyValueList="jmxTestCaseInfo.headers"
                                      @change="handleHeadersChange">

                        </cc-key-value>
                    </el-form-item>
                </div>
            <#-- 线程组配置  -->
                <div class="base-tit legend-title" @click="isCollapseThreadGroup = !isCollapseThreadGroup">
                    <i v-if="isCollapseThreadGroup" class="el-icon-arrow-down"></i>
                    <i v-else class="el-icon-arrow-up"></i>
                    <span>线程组配置</span>
                </div>
                <div :style="{display: isCollapseThreadGroup ? 'none' : 'block'}">
                    <el-form-item label="线程数">
                        <el-input-number :min="1" :max="2000" :step="1"
                                         v-model.number="jmxTestCaseInfo.threadGroup.threadNums"/>
                    </el-form-item>
                    <el-form-item label="循环执行次数">
                        <el-input-number :min="1" :max="20000" :step="1"
                                         v-model.number="jmxTestCaseInfo.threadGroup.loops"/>
                    </el-form-item>
                    <el-form-item label="ramp时间">
                        <el-input-number :min="0" :max="10" :step="1"
                                         v-model.number="jmxTestCaseInfo.threadGroup.rampTime"/>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </custom-dialog>
</script>

<script>
    Vue.component('jmx-test-case-upsert', {
        template: '#jmx-test-case-upsert',
        mixins: [window.ccMixIn.fixHeight],
        data() {
            return {
                isCollapseRequest: false,
                isCollapseHeader: false,
                isCollapseThreadGroup: true,
                ulrs: {
                    projectType: '/v1/dict/getTypes/projectType',
                    getDetailInfo: '/testCase/getDetailInfo',
                    save: '/testCase/save'
                },
                dialogOptions: {
                    title: this.getTitle(),
                    visible: true,
                    size: 'full'
                },
                jmxTestCaseInfo: {
                    id: undefined,
                    projectType:'virgo',
                    testCaseName: 'JMX测试用例',
                    request: {
                        protocol: 'http',
                        domain: '172.20.155.91',
                        port: '8888',
                        path: '',
                        method: 'GET'
                    },
                    urlParams: [
                        {
                            key: '',
                            value: ''
                        }
                    ],
                    headers: [
                        {
                            key: '',
                            value: ''
                        }
                    ],
                    threadGroup: {
                        threadNums: 100,
                        loops: 100,
                        rampTime: 1
                    }
                },
                REQUEST_METHODS: [
                    {
                        label: 'POST',
                        value: 'POST'
                    },
                    {
                        label: 'GET',
                        value: 'GET'
                    }
                ],
                projectTypeOptions:[],
                rules: {
                    testCaseName: [
                        {required: true, message: '请输入测试用例名称'}
                    ],
                    projectType: [
                        {required: true, message: '请选择所属项目'}
                    ],
                    domain: [
                        {required: true, message: '请输入域名'}
                    ],
                    path: [
                        {required: true, message: '请输入请求路径'}
                    ],
                    protocol: [
                        {required: true, message: '请选择协议'}
                    ]
                }
            }
        },
        props: {
            id:{
                type: Number
            },
            mode: {
                type: String,
                default: "edit"
            }
        },
        computed: {},
        methods: {
            handleUrlParamsChange: function (keyValueList) {
                this.jmxTestCaseInfo.urlParams = keyValueList;
            },
            handleHeadersChange: function (keyValueList) {
                this.jmxTestCaseInfo.headers = keyValueList;
            },
            handleSave: function () {
                this.validateFormData(function (err) {
                    if (!err) {
                        const data = this.getFormData()
                        this.ajax('/testCase/save', data, function (result) {
                            if (result.success) {
                                this.$message({
                                    showClose: true,
                                    message: '保存成功',
                                    type: 'success'
                                })
                                this.$emit("close");
                            } else {
                                this.$message(result.msg);
                            }
                        }.bind(this));
                    }
                }.bind(this))
            },
            close: function () {
                this.$emit("close");
            },
            getTitle: function () {
                let title = this.id ? '编辑jmx测试用例' : '创建jmx测试用例';
                return title;
            },
            validateFormData(cb) {
                this.$refs.jmxTestCaseForm.validate(function (valid) {
                    if (valid) {
                        if (this.jmxTestCaseInfo.testCaseName === '') {
                            this.$message({
                                type: 'error',
                                message: '测试用例名称不能为空！'
                            })
                            cb(true)
                        } else {
                            cb()
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请把表单填写完整'
                        })
                        cb(true)
                    }
                }.bind(this))
            },
            getFormData() {
                const id = this.jmxTestCaseInfo.id;
                let saveData = [];
                let configJson = {};
                configJson.threadGroup = this.jmxTestCaseInfo.threadGroup;
                configJson.request = this.jmxTestCaseInfo.request;
                configJson.urlParams = this.getTrimKeyValList(this.jmxTestCaseInfo.urlParams);
                configJson.headers = this.getTrimKeyValList(this.jmxTestCaseInfo.headers);
                let temp = {
                    id: id,
                    originName: this.jmxTestCaseInfo.testCaseName,
                    projectType: this.jmxTestCaseInfo.projectType,
                    testCaseFilePath: this.jmxTestCaseInfo.testCaseFilePath,
                    jmxConfigJson: JSON.stringify(configJson),
                };
                saveData.push(temp);
                const data = {jsonStr: JSON.stringify(saveData)}
                return data
            },
            setFormData: function (editData) {
                let jmxConfig = JSON.parse(editData.jmxConfigJson);
                this.jmxTestCaseInfo.projectType = editData.projectType;
                this.jmxTestCaseInfo.threadGroup = jmxConfig.threadGroup;
                this.jmxTestCaseInfo.request = jmxConfig.request;
                this.jmxTestCaseInfo.urlParams = this.getFinalKeyValList(jmxConfig.urlParams);
                this.jmxTestCaseInfo.headers = this.getFinalKeyValList(jmxConfig.headers);
                this.jmxTestCaseInfo.id = this.mode === 'edit' ? editData.id : undefined;
                this.jmxTestCaseInfo.testCaseName = this.mode === 'edit' ? editData.originName: '复制从 ' + editData.originName;
                this.jmxTestCaseInfo.testCaseFilePath = this.mode === 'edit' ? editData.testCaseFilePath : '';
            },
            loadProjectTypeOptions(){
                this.ajax('/v1/dict/getTypes/projectType', {
                }, function (data) {
                    if (data.code === '0') {
                        this.projectTypeOptions=data.data;
                    } else {
                        this.$message(data.msg);
                    }
                }.bind(this));
            }
        },
        mounted() {
            this.loadProjectTypeOptions();
        },
        created() {
            if (this.id) {
                var _this = this;
                _this.ajax('/testCase/getDetailInfo', {
                    id: _this.id
                }, function (data) {
                    if (data.code === '0') {
                        let tempData = JSON.parse(JSON.stringify(data.data));
                        _this.setFormData(tempData);
                    } else {
                        _this.$message(data.msg);
                    }
                });
            }
        }
    })
</script>

<style>
    .action-list .el-form-item {
        margin-bottom: 0px
    }

    .legend-title {
        cursor: pointer;
        line-height: 30px;
        padding-left: 5px;
    }

    .legend-title span {
        float: none;
    }
</style>
